<template>
	<view class="distance">		
	<image src="../static/icons/distance.png" class="distance_img" ></image>
	<i>{{text}}</i>
	</view>
</template>

<script>
export default{
	props:["latitude","longitude"],
	data(){
		return{
			text:'dd'
		}
	},
	watch:{
		latitude(newVal, oldVal){
			let QQMapWX = require('utils/qqmap-wx-jssdk.js')
				let qqmapsdk = new QQMapWX({
				key: 'G7RBZ-QFQWD-YNL4F-POIO2-EJQI3-2RFRC'
			});
					
					 qqmapsdk.calculateDistance({
						 from:{
							 latitude:30.526230995480322,
							 longitude:114.35812750362396
						 },
					       to:[ {
					         latitude: this.latitude,
					         longitude:this.longitude,
							 }],
					       success: (res)=> {
					           console.log(res);
							   this.text="距离您"+res.result.elements[0].distance+"米"
					           },
					       fail:(res)=> {
					           console.log(res);
					           },
			
					    });
		}
	}
}
	
</script>

<style lang="less">
	.distance{
		display: flex;
		margin-top:10rpx;
		.distance_img{
			height:36rpx;
			width:36rpx;
		}
		i{
			display: inline-block;
			margin-left:10rpx;
			line-height: 35rpx;
			font-size: 15px;
			color: #ff557f;
		}
	}
</style>
